<template>
  <div>
    <mheader></mheader>
    <div>
      <mnavi></mnavi>
    </div>
    <div class="container">
      <Row type="flex" justify="center">
        <Col span="17"  style="border: 1px solid #e2e2e2; padding: 20px; border-radius: 5px;">
          <Layout>
            <Sider :style="{background: '#fff'}">
              <h2 style="margin: 0 0 15px 5px;">我的账户</h2>
              <Menu width="auto" :active-name="activeMenu" @on-select="selectMenu">
                <MenuGroup title="账户管理">
                  <MenuItem name="info">
                    <Icon type="person"></Icon>
                    个人信息
                  </MenuItem>
                  <MenuItem name="address">
                    <Icon type="android-car"></Icon>
                    地址管理
                  </MenuItem>
                  <MenuItem name="security">
                    <Icon type="locked"></Icon>
                    安全中心
                  </MenuItem>
                </MenuGroup>
                <MenuGroup title="订单中心">
                  <MenuItem name="concert">
                    <Icon type="ios-list"></Icon>
                    门票订单
                  </MenuItem>
                  <MenuItem name="goods">
                    <Icon type="ios-cart"></Icon>
                    纪念品订单
                  </MenuItem>
                </MenuGroup>
              </Menu>
            </Sider>
            <div :style="{padding: '24px', minHeight: '280px', background: '#fff', width: '100%'}">
              <Card v-show="activeMenu==='info'">
                <p slot="title">
                  <Icon type="person"></Icon>
                  个人信息
                </p>
                <div>
                  <Form ref="customer" :model="customer" :label-width="100" label-position="right">
                    <FormItem label="登录ID：">
                      <span>{{ customer.loginId }}</span>
                    </FormItem>
                    <FormItem label="用户昵称：" prop="name">
                      <Input v-model="customer.nickname" style="width: 300px;"></Input>
                    </FormItem>
                    <FormItem label="真实姓名：" prop="name">
                      <Input v-model="customer.realName" style="width: 300px;"></Input>
                    </FormItem>
                    <FormItem label="性别：" prop="name">
                      <RadioGroup v-model="customer.sex">
                        <Radio :label=0>男</Radio>
                        <Radio :label=1>女</Radio>
                      </RadioGroup>
                    </FormItem>
                    <FormItem label="用户手机：" prop="phone">
                      <Input v-model="customer.phone" style="width: 300px;"></Input>
                    </FormItem>
                    <FormItem label="用户邮箱：" prop="phone">
                      <Input v-model="customer.email" style="width: 300px;"></Input>
                    </FormItem>
                    <FormItem label="用户生日：" prop="phone">
                      <DatePicker v-model="customer.birthday" type="date" style="width: 300px;"></DatePicker>
                    </FormItem>
                    <FormItem label="个人简介：" prop="phone">
                      <Input type="textarea" v-model="customer.description" style="width: 300px;"></Input>
                    </FormItem>
                    <div style="margin-left: 100px;">
                      <Button type="ghost" style="width: 100px;">取消</Button>
                      <Button type="primary" style="width: 100px;" :loading="save_loading" @click="saveInfo">保存</Button>
                    </div>
                  </Form>
                </div>
              </Card>
              <Card v-show="activeMenu==='address'">
                <p slot="title">
                  <Icon type="android-car"></Icon>
                  地址管理
                </p>
                <span slot="extra">
                  <Button type="warning" shape="circle" @click="createAddress" style="margin-top: -5px;">添加新地址</Button>
                </span>
                <div>
                  <Table border :columns="addressCols" :data="addArr"></Table>
                </div>
              </Card>
              <Card v-show="activeMenu==='security'">
                <p slot="title">
                  <Icon type="locked"></Icon>
                  安全中心
                </p>
                <div>
                  <Alert type="success" show-icon>
                    <span style="font-size: 16px; font-weight: bold">登录密码</span>
                    <span slot="desc">
                  互联网账号存在被盗风险，建议您定期更改密码以保护账户安全
                  <a @click="changePassword" style="float: right; margin-right: 5%; color: #fe4644">修改 >></a>
                </span>
                  </Alert>
                  <Alert type="warning" show-icon>
                    <span style="font-size: 16px; font-weight: bold">退出登录</span>
                    <span slot="desc">
                      如需更换账号可以通过退出登录后，重新进行登录操作
                      <a @click="logout" style="float: right; margin-right: 5%; color: #fe4644">退出 >></a>
                </span>
                  </Alert>
                </div>
              </Card>
              <Card v-show="activeMenu==='concert'">
                <p slot="title">
                  <Icon type="ios-list"></Icon>
                  门票订单
                </p>
                <div class="mtab">
                  <Tabs value="name1" type="line">
                    <TabPane label="所有订单" name="name1">所有订单</TabPane>
                    <TabPane label="待支付" name="name2">待支付</TabPane>
                    <TabPane label="待发货" name="name3">待发货</TabPane>
                    <TabPane label="待确认" name="name4">待确认</TabPane>
                  </Tabs>
                </div>
              </Card>
              <Card v-show="activeMenu==='goods'">
                <p slot="title">
                  <Icon type="ios-cart"></Icon>
                  纪念品订单
                </p>
                <div class="mtab">
                  <Tabs value="name2" type="line">
                    <TabPane label="所有订单" name="name1">所有订单</TabPane>
                    <TabPane label="待支付" name="name2">待支付</TabPane>
                    <TabPane label="待发货" name="name3">待发货</TabPane>
                    <TabPane label="待确认" name="name4">待确认</TabPane>
                  </Tabs>
                </div>
              </Card>
            </div>
          </Layout>
        </Col>
      </Row>
    </div>
    <mfooter></mfooter>
    <Modal v-model="showModal" :title="title" @on-ok="saveAddr">
      <Form class="step-form" :model="formInfo" label-position="right" :label-width="100">
        <FormItem label="收货人姓名">
          <Input v-model="formInfo.receiver"></Input>
        </FormItem>
        <FormItem label="电话号码">
          <Input v-model="formInfo.phone"></Input>
        </FormItem>
        <FormItem label="所在地区">
          <al-cascader v-model="formInfo.area" level="2"/>
        </FormItem>
        <FormItem label="详细地址">
          <Input v-model="formInfo.detail"></Input>
        </FormItem>
        <FormItem label="邮政编码">
          <Input v-model="formInfo.postcode"></Input>
        </FormItem>
        <FormItem>
          <Checkbox v-model="formInfo.isDefault">设置默认地址</Checkbox>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import mnavi from "@/components/mnavi";
  import mheader from "@/components/mheader";
  import mfooter from "@/components/mfooter";
  import Cookies from "js-cookie";

  export default {
    name: "user",
    components: {
      mnavi,
      mheader,
      mfooter
    },
    data() {
      return {
        customer: {
          id:'',
          loginId:'',
          nickname: '',
          realName: '',
          sex: '0',
          phone: '',
          email: '',
          birthday: '',
          description: '',
        },
        save_loading: false,
        showModal: false,
        editFlag: false,
        activeMenu: 'info',
        addressCols: [
          {
            title: '默认地址',
            width: 90,
            align: 'center',
            render: (h, params) => {
              let isDefault = params.row.isDefault;
              if (isDefault) {
                return h('Icon', {
                  props: {
                    type: "checkmark-circled",
                    size: 18
                  }
                });
              }
            }
          },
          {
            title: '收货人',
            key: 'receiver',
            width: 120
          },
          {
            title: '联系电话',
            key: 'phone',
            width: 120
          },
          {
            title: '邮政编码',
            key: 'postcode',
            width: 90
          },
          {
            title: '地区',
            key: 'address',
            render: (h, params) => {
              return h('div', this.areaNameFormat(params.row.areaName))
            }
          },
          {
            title: '详细地址',
            key: 'detail'
          },
          {
            title: "操作",
            key: "action",
            width: 200,
            align: "center",
            render: (h, params) => {
              let isDefault = params.row.isDefault;
              return h("div", [
                h("Button",
                  {
                    props: {
                      type: "success",
                      size: "small",
                      disabled: isDefault
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.show(params.row.id);
                      }
                    }
                  },
                  "设默认"
                ),
                h("Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editAddress(params.index);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      width: 200,
                      title: "您确认删除这条内容吗？"
                    },
                    on: {
                      'on-ok': () => {
                        this.remove(params.row.id);
                      }
                    }
                  },
                  [h("Button", {
                    props: {
                      type: "error",
                      size: "small"
                    }
                  }, "删除")]
                )
              ]);
            }
          }
        ],
        addArr: [],
        title: '添加地址',
        formInfo: {
          area: [],
        },
        addrNode: {
          receiver: '',
          phone: '',
          area: [],
          detail: '',
          postcode: '',
          isDefault: false
        }
      }
    },
    methods: {
      saveInfo() {

      },
      logout() {

      },
      selectMenu(name) {
        this.activeMenu = name;
      },
      loadAddress() {
        this.$axios({
          method: 'get',
          url: '/api/address',
          params: {
            cid: this.customer.id
          }
        }).then(res => {
          this.addArr = res.data.result;
          this.addArr.forEach(e=> {
            e.area = JSON.parse(e.areaName);
          });
        });
      },
      createAddress() {
        this.title = '添加地址';
        this.editFlag = false;
        this.formInfo = Object.assign({}, this.addrNode);
        this.showModal = true;
      },
      editAddress(index) {
        this.title = '编辑地址';
        this.editFlag = true;
        const addr = this.addArr[index];
        this.formInfo = Object.assign({}, addr);
        this.showModal = true;
      },
      saveAddr() {
        let area = this.formInfo.area;
        if (area.length > 0) {
          let area_code = [];
          let area_name = [];
          area.forEach(e => {
            area_code.push(e.code);
            area_name.push(e.name);
          });
          this.formInfo['areaCode'] = JSON.stringify(area_code);
          this.formInfo['areaName'] = JSON.stringify(area_name);
        }
        let url = '/api/address';
        if (this.editFlag) {
          url = url + `/${this.formInfo.id}`;
        }
        this.formInfo.parentId = this.customer.id;
        this.$axios({
          method: 'post',
          url: url,
          data: {
            address: this.formInfo,
          }
        }).then(res => {
          console.log(res)
        });
        this.showModal = false;
      },
      changePassword() {

      },
      areaNameFormat(name) {
        if (name !== undefined) {
          return JSON.parse(name).join(", ");
        }
      },
      show(){},
      remove(){},
    },
    mounted() {
      this.customer = JSON.parse(Cookies.get('customer'));
      this.customer.sex = Number(this.customer.sex);
      this.loadAddress();
    }
  }
</script>

<style scoped>
  .container {
    margin: 30px 0;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    color: #f2593f;
    border-right: 2px solid #f2593f;
  }

</style>
